<template>
	<view class="banner-wrapper" v-if="cartInfo && cartInfo.length>0">
	<view class="banner-detail" :class="{'show':showBannerDetailClass,'hide':!showBannerDetailClass}" v-if="isShowBannerDetail">
		<view class="item">
			<view class="name">
				商品总额
			</view>
			<view class="value">
				{{totalAmount}}
			</view>
		</view>
		<view class="item">
			<view class="name">
				优惠券扣减
			</view>
			<view class="minus-name" v-if="coupon.couponDTO.name">
				{{coupon.couponDTO.name}}
			</view>
			<view class="minus-value">
				{{deductAmount}}
			</view>
		</view>
		<view class="item">
			<view class="name">
				实际支付金额
			</view>
			<view class="value">
				{{(totalAmount-deductAmount).toFixed(2)>0?(totalAmount-deductAmount).toFixed(2):'0.00'}}
			</view>
		</view>
	</view>
	<view class="banner">
		<view class="num" @click="toCart">
			<uni-icons type="cart-filled" color="#4399fc" size="50"></uni-icons>
			<uni-badge type="warning" :text="cartNum" class="badge"></uni-badge>
		</view>
		<view class="amount">
			<view >
				<text class="total">预估到手￥</text>{{(totalAmount-deductAmount).toFixed(2)>0?(totalAmount-deductAmount).toFixed(2):'0.00'}}
			</view>
			<view v-if="coupon">
				<span class="deduct">已优惠￥{{deductAmount}}</span>
				<uni-icons type="arrowup" size="20" color="#4399fc" v-if="isShowBannerDetail" @click="hideBannerDetail()"></uni-icons>
				<uni-icons type="arrowdown" size="20" color="#4399fc" v-else @click="showBannerDetail()"></uni-icons>
			</view>
		</view>
		<view class="button-base btn" @click="createOrder">
				去结算({{cartNum}})
		</view>
		
	</view>
	</view>
</template>
 
<script>
	import uniBadge from "@/components/uni-badge/uni-badge.vue"
	import uniIcons from "@/components/uni-icons/uni-icons"
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			uniBadge,
			uniIcons
		},
		computed: {
			...mapState(['hasLogin','userInfo','applicationConfig','cartInfo']),
			cartNum: function(){
				let productUnit = 0;
				this.cartInfo.forEach(function(cart,index){
					productUnit = productUnit + cart.unit;
				})
				return productUnit;
			},
			totalAmount: function(){
				return this.calcTotal(this.cartInfo);
			}
		},
		props: {
			
		},
		watch: {
			cartInfo(val){
				this.getBestCoupon(val);
			}
		},
		data() {
			return{
				isShowBannerDetail: false,
				showBannerDetailClass:false,
				coupon:{
					couponDTO:{
						
					}
				},
				deductAmount:0
			}
		},
		methods: {
			hideBannerDetail(){
				let that = this;
				this.showBannerDetailClass = false;
				//等隐藏动画效果消失后再关闭
				setTimeout(function(){
					that.isShowBannerDetail = false;
				},300)
			},
			showBannerDetail(){
				this.showBannerDetailClass = true;
				this.isShowBannerDetail = true;
			},
			resetCoupon(){
				this.coupon = {
					couponDTO:{
						
					}
				};
				this.deductAmount = 0;
			},
			getBestCoupon(cartInfo){
				this.resetCoupon();
				if(cartInfo && cartInfo.length>0){
					var orderProductDTOList = [];
					cartInfo.forEach(function(cart,index){
						orderProductDTOList.push({
							productDTO:{
								productUuid: cart.productDTO.productUuid
							},
							productUnit: cart.unit,
							productUnitPrice: cart.unitPrice
						});
					})
					let postData = {
						userDTO:{
							userUuid:this.userInfo.userUuid
						},
						orderProductDTOList:orderProductDTOList
					};
					this.$api.request.bestCoupon(postData, res => {
						if (res.body.status.statusCode === '0') {
							var coupon = res.body.data;
							if(coupon){
								this.coupon = coupon;
								var totalAmount = this.calcTotal(this.cartInfo);
								var deductAmount = this.calcDeductAmount(totalAmount,coupon);
								this.deductAmount = deductAmount;
							}
						}
					}, true);
				}
			},
			calcTotal(cartList) {
				let list = cartList;
				let total = 0;
				list.forEach(item => {
					total += item.unitPrice * item.unit;
				})
				return total.toFixed(2); 
			},
			calcDeductAmount(totalAmount, coupon){
				var couponType = coupon.couponDTO.type;
				var deductAmount = 0.00;
				if('CASH'==couponType) {
					deductAmount = coupon.couponDTO.benefitCash.toFixed(2);
				}else if('DISCOUNT' == couponType) {
					var discount = coupon.couponDTO.benefitDiscount;
					deductAmount = (totalAmount-(totalAmount*discount/10)).toFixed(2);
				}
				return deductAmount;
			},
			toLogin(){
				uni.navigateTo({
					url:'/pages/public/login'
				})
			},
			toCart(){
				uni.switchTab({
					url:'/pages/cart/cart'
				})
			},
			createOrder() {
				if(this.hasLogin){
					let selectedCartIds = ''; 
					this.cartInfo.forEach(item => {
						selectedCartIds = selectedCartIds + "," + item.shoppingCartUuid;
					})
					if (selectedCartIds.substr(0, 1) == ',') {
						selectedCartIds = selectedCartIds.substr(1);
					}
					uni.navigateTo({
						url: '/pages/order/createOrder?data=' + JSON.stringify(selectedCartIds)
					})
				}else{
					uni.navigateTo({
						url:'/pages/public/login'
					})
				}
			},
		},
		created() {
			this.getBestCoupon(this.cartInfo);
		}
	}
</script>

<style lang='scss'>
	.banner-wrapper{
		z-index: 88;
		position: fixed;
		bottom: var(--window-bottom);
		width: 100%;
	}
	.banner-detail{
		position: fixed;
		left: 0;
		bottom: calc(var(--window-bottom) + 120upx);
		background: #fff;
		width: 100%;
		height: 340upx;
		padding: 10upx 40upx 40upx 40upx;
			
		.item{
			display: flex;
			margin: 40upx 0;
		}
		.name{
			margin-right: auto;
			font-size: $font-base;
			font-weight: bold;
		}
		.value{
			color: $base-color;
			font-size: $font-lg;
			&::before{
				content:'￥';
				font-size: $font-sm;
			}
		}
		.minus-name{
			background: $uni-color-primary;
			color:#fff;
			font-size: $font-sm;
			padding: 6upx;
			margin-right: 10upx;
		}
		.minus-value{
			color: $font-color-dark;
			font-size: $font-lg;
			&::before{
				content:'-￥';
				font-size: $font-sm;
			}
		}
	}
	.show{
		animation: slideContentUp 0.3s linear both;
	}
	.hide{
		animation: slideContentDown 0.3s linear both;
	}
	@keyframes slideContentUp{
		from{
			height: 0;
		}
		to{
			height: 340upx;
		}
	}
	@keyframes slideContentDown{
		from{
			height: 340upx;
		}
		to{
			height: 0;
		}
	}
	.banner {
		
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		height: 120upx;
		padding: 0 30upx;
		background: #fff;
		opacity: 0.9;
		border-radius: 5px 5px 0 0;
		.num{
			flex: 1;
			width: 60%;
			color: $base-color;
			font-size: $font-lg;
			margin-right: auto;
			.badge{
				position: absolute;
				top: 0.9em;
				left: 4em;
				background: $uni-color-warning;
				color: #fff;
				border-radius: 200upx;
				height: 40upx;
				line-height: 40upx;
				font-size: 24upx;
				padding: 0;
				text-align: center;
			}
		}
		.amount{
			display:flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: center;
			flex: 2;
			width: 60%;
			color: $base-color;
			font-size: $font-lg+8upx;
			font-weight: bold;
			padding-right: 40upx;
			height: 30upx;
			line-height: 30upx;
			.total{
				color: $font-color-base;
				font-size: $font-base;
			}
			.deduct{
				font-weight: normal;
				color: $base-color;
				font-size: $font-sm;
			}
		}
		.btn{
			width: 240upx;
			font-size: $font-lg+4upx;
		}
	}
	
	
</style>
